<template>
  <div class="page-container" style="padding: 10px 10px;">
    <!-- 头部tabs切换 -->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane :label="'出售中商品（'+total+'）'" name="sell"/>
      <el-tab-pane :label="'仓库中商品（'+total+'）'" name="warehouse"/>
      <el-tab-pane :label="'已经售罄商品（'+total+'）'" name="sellOut"/>
      <el-tab-pane :label="'警戒库存（'+total+'）'" name="alert"/>
      <el-tab-pane :label="'商品回收站（'+total+'）'" name="recycle"/>
    </el-tabs>
    <!-- 查询form表单 -->
    <el-form :model="queryParams" inline style="text-align: left">
      <el-form-item label="商品分类">
        <el-tree-select
            v-model="queryParams.classifyIds"
            :data="classifyList"
            multiple
            :props="{ children: 'children' ,label: 'classifyName',value: 'id' }"
            check-strictly
            placeholder="请选择分类"
            clearable
            style="width: 260px">
        </el-tree-select>
      </el-form-item>
      <el-form-item label="商品搜索">
        <el-input v-model="queryParams.goodsName" style="width: 300px;"
                  placeholder="请输入商品名称，关键字，商品ID" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchPage">搜索</el-button>
        <el-button>重置</el-button>
      </el-form-item>
      <div>
        <el-button type="primary" @click="toAddPage">添加商品</el-button>
        <el-button @click="downloadExcel">导出</el-button>
      </div>
    </el-form>
    <!-- 列表页面 -->
    <goodsList :goods-list="goodsData"></goodsList>
    <!-- 分页 -->
    <el-pagination size="small"
                   v-model:page="queryParams.pageNum"
                   v-model:limit="queryParams.pageSize"
                   layout="prev, pager, next"
                   :total="total"/>
  </div>
</template>
<script setup>
import {ref, reactive, onMounted, getCurrentInstance, watch} from 'vue'
// 引入子页面
import goodsList from "@/views/goods/component/goodsList.vue"
import router from "@/router";
import download from "@element-plus/icons/lib/Download";
import {ElMessage} from "element-plus";
// 引入axios
const axios = getCurrentInstance().appContext.config.globalProperties.$axios;
// 响应式数据
const classifyList = ref([])
const activeName = ref('sell')
const goodsData = ref([])
const pageNum = ref(1)
const total = ref(20)
const queryParams = reactive({
  pageSize: 10,
  pageNum: 1,
  goodsName: null,
  classifyIds: [],
  tabs: 1
})
// 获取商品分类信息
const getClassifyList = async () => {
  const res = await axios.post('/classify/list')
  classifyList.value = res.data.data
}
// 跳转到添加商品页面
const toAddPage = () => {
  router.push({path: "/goods/goodsEdit", query: {id: 1}})
}
// 切换数据分类
const handleClick = () => {
  switch (activeName.value) {
    case 'sell':
      queryParams.tabs = 1
      break;
    case 'warehouse':
      queryParams.tabs = 2
      break;
    case 'sellOut':
      queryParams.tabs = 3
      break;
    case 'alert':
      queryParams.tabs = 4
      break;
    case 'recycle':
      queryParams.tabs = 5
      break;
  }
}
// 监听器：当tabs切换时，进行数据变更
watch(activeName, () => {
  searchPage();
});
// 分页查询信息
const searchPage = async () => {
  goodsData.value = []
  let res = await axios.post('/goods/pageList', queryParams);
  console.log(res)
  if (res.data.data != null) {
    goodsData.value = res.data.data.records
    total.value = res.data.data.total
    pageNum.value = res.data.data.current
  }
}
const downloadExcel = async () => {
  axios({
    method: 'post',
    url: '/goods/downloadExcel',
    responseType: 'blob', //设置返回信息为二进制文件，默认为json
  }).then(res => {
    // debugger;
    let blob = new Blob([res.data], { type: 'application/xlsx' });
    let url = window.URL.createObjectURL(blob);
    const link = document.createElement('a'); //创建a标签
    link.href = url;
    link.download = '商品信息.xlsx'; //重命名文件
    link.click();
    URL.revokeObjectURL(url);
  })
}
// 获取数据总条数
const goodsTotal = async () => {
  let res = await axios.get('/goods/goodsTotal');
  console.log(res)
}
// 页面加载完成，调用初始化方法
onMounted(() => {
  searchPage()
  getClassifyList()
})
</script>

<style scoped lang="scss">
.page-container {
  height: 100%;
  background-color: #fff;
  padding: 10px 10px;
  display: flex;
  flex-direction: column;

  .pageContent {
    height: calc(100% - 140px);
    flex: 1;
  }
}
</style>
